<template>
  <el-empty :class="[noDataText ? '' : 'aEmpty']">
    <template #image v-if="imageSlot">
      <img
        style="width: 100%; height: 100%"
        :src="getAssetsImg(`${noDataImg}`)"
      />
    </template>
    <template #description v-if="descriptionSlot">
      <p v-if="noDataText">
        {{ noDataText }}
      </p>
    </template>
    <!-- 自定义底部desc -->
    <slot name="footerDesc"></slot>
  </el-empty>
</template>

<script lnag="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  imageSlot: {
    type: Boolean,
    default: false,
  },
  descriptionSlot: {
    type: Boolean,
    default: false,
  },
  noDataImg: {
    type: String,
    default: "noData",
  },
  noDataText: {
    type: String,
    default: "暂无数据",
  },
});

const { imageSlot, descriptionSlot, noDataImg, noDataText } = toRefs(props);
</script>

<style lang="scss" scoped>
.aEmpty {
    :deep(.el-empty__bottom) {
        margin-top: 0;
    }
}
</style>
